<template>

  <div>
    <el-breadcrumb separator="/" style="padding-bottom:20px;">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container direction="vertical">

      <fm-grid url="/api/v1/sys/role" ref="grid" :params="['kw']">

        <template slot-scope="{rows,loading,search}">

          <div class="filter-container">
            <el-input style="width: 200px;" size="small" v-model="query.kw" class="filter-item"
                      placeholder="请输入姓名或用户名"/>
            <el-button class="filter-item" size="small" style="margin-left: 10px;" @click="search(query,1)"
                       type="primary" icon="search">搜索
            </el-button>
            <div style="float:right;">
              <el-button class="filter-item" style="margin-right: 20px;" @click="$refs.roleae && $refs.roleae.add()" type="text"
                        icon="document">添加
              </el-button>
            </div>

          </div>

          <el-table :data="rows" stripe v-loading="loading" style="width: 100%;padding-bottom:20px;border-bottom:none;">
            <el-table-column prop="name" label="名称" width="180"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="{row}">
                <el-button @click="edit(row)" type="text">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

      </fm-grid>
    </el-container>
    <role-ae ref="roleae" @success="$refs.grid && $refs.grid.search()"/>
  </div>

</template>

<script>

  import RoleAe from './RoleAe'
  import axios from '@/util/axios'

  export default {

    components: {RoleAe},

    mounted(){
      this.$nextTick(() => {
        const {kw} = this.$route.query
        this.query = {...this.query, kw}
      });
    },

    data(){
      return {
        query: {}
      }
    },

    methods: {

      edit(row){
        this.$refs.roleae.edit(row.id);
      },

      onEditOk(){
        this.editVisible = false
        this.$refs.grid.search()
      }
    }

  }

</script>

